<template>
    <div class="title">学校信息</div>
    <div class="nav">
        <el-button type="success" round @click="onAddItem">新增</el-button>
        <el-button type="info" round @click="importItem">导入</el-button>
    </div>
    <!-- 表格数据显示 -->
    <div>
        <el-table :data="formData.tableData" style="width: 100%" border>
            <el-table-column type="index" width="80" label="序号" />
            <el-table-column prop="id" hidden label="数据ID" width="100" />
            <el-table-column prop="name" hidden label="学校" width="120" />
            <el-table-column prop="mark" label="标识码" width="120" />
            <el-table-column prop="longitude" label="经度" width="120" />
            <el-table-column prop="latitude" label="纬度" width="120" />
            <el-table-column prop="create_date" label="创建时间" width="120" />
            <el-table-column prop="organizers" label="举办者" width="120" />
            <el-table-column prop="credit_code" label="统一信用代码" width="120" />
            <el-table-column prop="school_type" label="类型" width="120" />
            <el-table-column prop="disable" label="是否停办" width="120" />
            <el-table-column prop="address" label="地址" width="500" />
            <el-table-column fixed="right" label="操作" width="150">
                <template #default="scope">
                    <el-button type="info" size="small" :icon="More" circle />
                    <el-button type="success" size="small" :icon="Edit" circle @click="editRow(scope.row)" />
                    <el-button type="danger" size="small" :icon="Delete" circle @click="deleteRow(scope.row)" />
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 操作对话框 -->
    <el-dialog v-model="formData.centerDialogVisible" title="添加学校信息" width="500" center>
        <span>
            <el-form :model="formData.dialogSchoolTem" label-width="auto" style="max-width: 600px">
                <el-form-item label="数据ID">
                    <el-input v-model="formData.dialogSchoolTem.id" disabled />
                </el-form-item>
                <el-form-item label="学校">
                    <el-input v-model="formData.dialogSchoolTem.name" />
                </el-form-item>
                <el-form-item label="标识码">
                    <el-input v-model="formData.dialogSchoolTem.mark" />
                </el-form-item>
                <el-form-item label="经度">
                    <el-input v-model="formData.dialogSchoolTem.longitude" />
                </el-form-item>
                <el-form-item label="纬度">
                    <el-input v-model="formData.dialogSchoolTem.latitude" />
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker v-model="formData.dialogSchoolTem.create_date" value-format="YYYY-MM-DD" type="date"
                        placeholder="请选择日期" />
                </el-form-item>
                <el-form-item label="举办者">
                    <el-input v-model="formData.dialogSchoolTem.organizers" />
                </el-form-item>
                <el-form-item label="统一信用代码">
                    <el-input v-model="formData.dialogSchoolTem.credit_code" />
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="formData.dialogSchoolTem.school_type" placeholder="请选择类型">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否停办">
                    <!-- <el-input v-model="formData.dialogSchoolTem.disable" /> -->
                    <el-radio-group v-model="formData.dialogSchoolTem.disable">
                        <el-radio :value=true>是</el-radio>
                        <el-radio :value=false>否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="formData.dialogSchoolTem.address" />
                </el-form-item>
            </el-form>
        </span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelItem">取消</el-button>
                <el-button type="primary" @click="addSchool" v-if="formData.showaddoredit">
                    提交
                </el-button>
                <el-button type="primary" @click="editItem" v-if="!formData.showaddoredit">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 导入对话框 -->
    <el-dialog v-model="formData.importSchools" title="导入学校信息" width="500" center>
        <span>
            <div class="setmodel">

                <el-button @click="dowloadModel">模块下载</el-button>
            </div>
            <div>
                <el-upload class="upload-demo" drag :http-request='importSchool'>
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        <em>将文件拖到此处将自动上传！</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传EXCEL文件
                        </div>
                    </template>
                </el-upload>
            </div>
        </span>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import {
    More,
    Delete,
    Edit,
    UploadFilled,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import baseApi from '../../utils/api';
import settingAPI from '@/setting/setting'

// 数据定义
const formData = reactive({
    tableData: [{
        id: '',
        name: '',
        mark: '',
        longitude: '',
        latitude: '',
        create_date: '',
        address: '',
        organizers: '',
        credit_code: '',
        school_type: '',
        disable: false
    }],
    centerDialogVisible: false,
    dialogSchoolTem: {
        id: '',
        name: '',
        mark: '',
        longitude: '',
        latitude: '',
        create_date: '',
        address: '',
        organizers: '',
        credit_code: '',
        school_type: '',
        disable: true
    },
    schoolTem: {
        id: '',
        name: '',
        mark: '',
        longitude: '',
        latitude: '',
        create_date: '',
        address: '',
        organizers: '',
        credit_code: '',
        school_type: '',
        disable: true
    },
    showaddoredit: false,
    importSchools: false
})
const options = [{
    value: '公办',
    label: '公办'
},
{
    value: '民办',
    label: '民办'
}, {
    value: '普惠性民办幼儿园',
    label: '普惠性民办幼儿园'
}]

// 函数定义
// 删除
const deleteRow = async (row: any) => {
    await baseApi.schoolAPI.del(row.id)
    getSchool()
}
// 编辑
const editRow = async (row: any) => {
    formData.showaddoredit = false
    formData.dialogSchoolTem = row
    formData.centerDialogVisible = true

}

const editItem = async () => {
    await baseApi.schoolAPI.alt(formData.dialogSchoolTem.id, formData.dialogSchoolTem)
    getSchool()
    formData.dialogSchoolTem = formData.schoolTem
    formData.centerDialogVisible = false
}
// 取消
const cancelItem = () => {
    formData.dialogSchoolTem = formData.schoolTem
    formData.centerDialogVisible = false
}
// 添加
const onAddItem = () => {
    formData.showaddoredit = true
    formData.centerDialogVisible = true
}

const addSchool = async () => {
    await baseApi.schoolAPI.add(formData.dialogSchoolTem)
    getSchool()
    formData.dialogSchoolTem = formData.schoolTem
    formData.centerDialogVisible = false
}

// 数据导入
const importItem = () => {
    formData.importSchools = true
}
const importSchool = (file: any) => {
    // 文件在axiox中一般封装在formdata类中
    // 1.定义formData类
    let fileReq = new FormData()
    // 2.把文件装在formData的容器中
    fileReq.append('file', file.file)
    // 请求
    const importurl = `${settingAPI.BACK_URL}setting/students/importSchool/`
    baseApi.schoolAPI.upload(importurl, fileReq)
}
// 模板下载
const dowloadModel = () => {
    try {
        let url = settingAPI.BACK_URL + 'media/model/学校代码维护表模板.xlsx';
        let elementIftrame = document.createElement("iframe");
        elementIftrame.src = url;
        elementIftrame.style.display = "none";
        document.body.appendChild(elementIftrame);
    } catch (error) {
        console.log(error);
    }
}
// 获取所有
const getSchool = async () => {
    const res = await baseApi.schoolAPI.getAll()
    formData.tableData = res.data
    ElMessage({
        message: '学校信息加载成功！',
        type: 'success'
    })
}
getSchool()
</script>

<style scoped>
.title {
    background-color: #fff;
    height: 40px;
    text-align: center;
    font-size: 25px;
    border: #1e1e1e;
}

.nav {
    margin: 10px 0;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
}

.setmodel {
    height: 50px;
    border: 2px dashed #67c23a;
    border-radius: 10px;
    margin-bottom: 20px;
}
</style>